<template>
  <v-app id="inspire">
    <v-app-bar app color="white" flat absolute hide-on-scroll prominent dense>
      <v-app-bar-nav-icon
        id="nav_icon"
        @click="drawer = true"
      ></v-app-bar-nav-icon>
      <v-tabs center-active class="tabs" color="green lighten-4">
        <v-tab v-for="link in links" :key="link.text" :to="link.url">
          {{ link.text }}
        </v-tab>
      </v-tabs>
      <!-- <div class="d-flex align-center justify-end">
        <div
          class="
            v-input
            mx-6 mx-md-4
            v-input--hide-details v-input--dense
            theme--light
            v-text-field
            v-text-field--single-line
            v-text-field--solo
            v-text-field--solo-flat
            v-text-field--is-booted
            v-text-field--enclosed
            v-text-field--placeholder
            rounded-lg
          "
          style="max-width: 450px"
        >
          <div class="v-input__control">
            <div class="v-input__slot grey lighten-3">
              <div class="v-input__prepend-inner">
                <span
                  aria-hidden="true"
                  class="v-icon notranslate ml-1 mr-2 theme--light grey--text"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    role="img"
                    aria-hidden="true"
                    class="v-icon__svg"
                  >
                    <path
                      d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
                    ></path></svg
                ></span>
              </div>
              <div class="v-text-field__slot">
                <input
                  autocomplete="off"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
                  id="input-25"
                  placeholder="搜索"
                  type="text"
                />
              </div>
            </div>
          </div>
          <div class="v-menu" readonly="readonly"></div>
          <div class="spacer"></div>
          <div class="v-menu"></div>
        </div>
      </div> -->
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list nav dense>
        <v-list-item-group v-model="group" active-class="">
          <v-list-item
            v-for="(item, index) in links"
            :key="index"
            :to="item.url"
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{ item.text }}</v-list-item-title>
          </v-list-item>

          <!-- <v-list-item>
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Account</v-list-item-title>
          </v-list-item> -->
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container>
        <!-- 如果使用 vue-router -->
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    //
    links: [
      { text: "首页", url: "/", icon: "mdi-home" },
      { text: "全部", url: "/works", icon: "mdi-notification-clear-all" },
      { text: "专题", url: "/category", icon: "mdi-account" },
      // { text: "时光", url: "/timeline" ,icon:""},
      { text: "关于", url: "/about", icon: "mdi-information-outline" },
    ],
    drawer: false,
    group: null,
  }),
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#nav_icon {
  display: none;
}
.routerView {
  max-width: 1280px;
}

@media screen and (max-width: 600px) {
  .tabs {
    display: none;
  }
  #nav_icon {
    display: block;
  }
}
</style>